<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>TodoList Jquery</title>
	</head>
	<body>
		<div id="app">
			<input type="text" id="value" />
			<button id="btn">提交</button>
			<ul id="list"></ul>
		</div>
		
		<script src="js/jquery-3.4.1.min.js"></script>
		<script>
			function Page(){
				
			}
			
			$.extend(Page.prototype,{
				init: function(){
					this.bindEvent()
				},
				bindEvent:function(){
					let btn = $('#btn');
					btn.on('click',$.proxy(this.handleBtnClick,this))
				},
				handleBtnClick:function(){
					let input = $('#value');
					let inputValue = input.val();
					let ulElem = $('#list');
					ulElem.append('<li>'+inputValue+'</li>');
					input.val('');
				}
				
			})
			
			let page = new Page();
			page.init();
		</script>
	</body>
</html>
